<template>
  <div id="app">
    <h2>姓名是：{{ name }}，年龄是:{{ age }}</h2>
    <button @click="handleClick">点我</button>
    <HelloWorld :mymsg="msg"></HelloWorld>
    <hr>
    <button @click="handleSend">点击向后端发送请求</button>
    <hr>
    <h1>发送post请求</h1>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <button @click="handleSubmit">发送</button>
    <br>
    <button @click="handleSubmit2">点我登录，请求头中带数据</button>
  </div>


</template>

<script>
import axios from "axios"
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: 'App',
  data() {
    return {
      name: "jk1997",
      age: 0,
      msg: "123",
      username: '',
      password: '',
    }
  },
  methods: {
    handleClick() {
      this.name = "hahahha"
    },
    handleSend() {
      axios.get('http://127.0.0.1:8000/login/').then(res => {
        console.log(res)
        this.name = res.data.name
        this.age = res.data.age
      })
    },
    handleSubmit() {
      axios.post('http://127.0.0.1:8000/login/', {
        username: this.username,
        password: this.password
      },).then(res => {
        // console.log(res)
        if (res.data.code == 200) {
          location.href = "http://www.baidu.com"   
        } else {
          alert(res.data.msg)
        }
      })
    },
    handleSubmit2() {
      axios.post('http://127.0.0.1:8000/login/', {
        username: this.username,
        password: this.password
      },{headers:{token:"fhjgfjkgfyu"}}).then(res => {
        // console.log(res)
        if (res.data.code == 200) {
          location.href = "http://www.baidu.com"
        } else {
          alert(res.data.msg)
        }
      })

    },


  },
  components: {HelloWorld},

}
</script>
